<template>

    <div class="safetyWarningBox">
        <div class="d-flex">
            <div id="safetyWarningLineChartBox" style="width:350px;height: 200px;flex-shrink:0 "></div>
            <div class="">
                <div class="position-relative">
                    <div id="safetyWarningPieChartBox" style="width:162px;height: 100px;"></div>
                    <div class="absoluteFull flexCenterCenter">
                        <div class="text-center flexCenterCenter"
                             style="width:72px;height:72px;border-radius: 100%; border:1px dotted #92eaff">
                            <div>
                                <div class="text-size-24 line-height-1 text-f54f3d font-weight-bold">
                                    {{safetyWarningChart.allNum}}
                                </div>
                                <div class="text-size-12">当前预警</div>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="mt-8 px-8">
                    <div class="flexCenterBetween" v-for="(item,i) in safetyWarningChart.lstCurrent" :key="i">
                        <div class="flexCenter">
                            <div class="circleDot mr-8"
                                 :style="{backgroundColor:safetyWarningPieColor[i]}"></div>
                            <div>{{item.name}}</div>
                        </div>
                        <div :style="{color:safetyWarningPieColor[i]}" class="font-weight-bold">{{item.value}}
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="w-100 mt-8 position-relative">
            <div class="scanningBar" v-if="!dataSafetyWarninList||dataSafetyWarninList.length==0"></div>
            <img :src="require('../../assets/img/dutyMonitoring/borderLeft.png')" alt=""
                 class="position-absolute" style="left:10px">

            <div style="height:193px;" class="mx-auto flexCenterCenter">
                <div class="overfow-auto dataSafetyWarninListBox" style="height:183px;" ref="dataSafetyWarninListBox">
                    <div v-for="(item,i) in dataSafetyWarninList" :key="i" class="d-flex safetyWarningTableRow"
                         v-bind:class="{'active':item.active}"
                         @click="checkSafeWarningDetail(item)">
                        <div style="width:50px">{{item.warningTime}}</div>
                        <div style="width:150px;text-align: center">{{item.highSpeedName}}</div>
                        <div style="width:150px;text-align: center">{{item.detailLocation}}</div>
                        <div style="width:50px">{{item.trafficFlow}}</div>
                        <div style="width:48px;text-align: right;color:#00fff0">{{item.largeCarRate|rateFormat}}%</div>
                    </div>
                </div>

            </div>

            <img :src="require('../../assets/img/dutyMonitoring/borderRight.png')" alt=""
                 class="position-absolute" style="right:10px;top:0">
        </div>

    </div>

</template>

<script>
    import {
        getSafetyWarningLine,
        getSafetyWarninList
    } from "../../common/api";
    import {echartsLineOptionFactory} from "../../common/echart-config/echart-config";
    import echarts from 'echarts'
    import {safetyWarningPieColor} from "../../common/data/sys-data";
    import {clearIntervalArray, getLastCurrentTime} from "../../utils/js-utils";
    import * as moment from "moment";
    import {rateFormat} from "../../common/filters";

    export default {
        name: "safetyWarning",
        filters: {rateFormat},
        data() {
            return {
                // safetyWarningSum: 0,
                // dataSafetyWarningPie: [], // 当前预警饼状图
                safetyWarningPieColor: safetyWarningPieColor,

                safetyWarningChart: {},

                dataSafetyWarninList: [],// 安全风险预警表格
                echartsSafetyWarningPieChart: null, // 安全风险预警饼状图
                echartsSafetyWarningLineChart: null,// 安全风险预警折线图


                scrollInterVal: null,
                safetyWarninListInterVal: null,
                safetyWarningLineInterVal: null,


                intervalArray: [],

            }
        }, methods: {


            checkSafeWarningDetail(item) {
                this.dataSafetyWarninList.forEach(function (v) {
                    if (v.active) {
                        v.active = false;
                    }
                });
                item.active = true;
                this.$emit('checkRiskWarning', item);
                this.$forceUpdate();
            },

            getSafetyWarninList() {// 安全风险预警表格
                //todo 发版修改
                var reqBody = {
                    // currentTime:'2020-11-26'
                    currentTime: moment().format("YYYY-MM-DD")
                };
                getSafetyWarninList(reqBody).then(res => {
                    if (res.isSuccess) {
                        this.dataSafetyWarninList = res.data;
                        this.clearInterVal();
                        this.doScroll(this.dataSafetyWarninList.length);
                    }
                })
            },

            getSafetyWarningLine() { // 安全风险预警折线图
                var reqBody = {
                    currentTime: getLastCurrentTime()
                };
                getSafetyWarningLine(reqBody).then(res => {
                    if (res.isSuccess) {
                        this.safetyWarningChart = res.data;
                        this.echartsSafetyWarningLineChart = echarts.init(document.getElementById('safetyWarningLineChartBox'));
                        //"#08fbdd"
                        //"#099ef8"
                        var xAxisData = this.safetyWarningChart.timeList;
                        var series = [{
                            data: this.safetyWarningChart.lastWeek,
                            color: "#deb154", name: "上周"
                        }, {data: this.safetyWarningChart.nowWeek, color: "#ee844a", name: "今天"}];
                        this.echartsSafetyWarningLineChart.setOption(echartsLineOptionFactory(xAxisData, series));


                        this.safetyWarningChart.lstCurrent.forEach((v) => {
                            v.value = v.num;
                        })

                        this.echartsSafetyWarningPieChart = echarts.init(document.getElementById('safetyWarningPieChartBox'));
                        var option = {
                            color: safetyWarningPieColor,
                            series: [
                                {
                                    type: 'pie',
                                    radius: ['75%', '100%'],
                                    avoidLabelOverlap: false,
                                    hoverAnimation: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    itemStyle: {
                                        borderWidth: 3,
                                        borderColor: "#071938"
                                    },
                                    data: this.safetyWarningChart.lstCurrent,
                                }
                            ]
                        };
                        this.echartsSafetyWarningPieChart.setOption(option);
                    }
                })
            },


            doScroll(len) {
                var hei = len * 36 + 6 - 183;
                var box = this.$refs.dataSafetyWarninListBox;

                this.scrollInterVal = setInterval(() => {
                    box.scrollTop = box.scrollTop + 1;
                    if (box.scrollTop >= hei) {
                        box.scrollTop = 0
                    }
                }, 100)
            },
            clearInterVal() {
                if (this.scrollInterVal) {
                    clearInterval(this.scrollInterVal);
                }
            }

        },
        mounted() {
            this.getSafetyWarninList();
            this.getSafetyWarningLine();
            this.intervalArray.push(setInterval(this.getSafetyWarninList, 1000 * 60 * 15))
            this.intervalArray.push(setInterval(this.getSafetyWarningLine, 1000 * 60 * 15))


        }, beforeDestroy() {

            if (this.echartsSafetyWarningPieChart) {
                this.echartsSafetyWarningPieChart.clear();
            }
            if (this.echartsSafetyWarningLineChart) {
                this.echartsSafetyWarningLineChart.clear();
            }

            this.clearInterVal()

            clearIntervalArray(this.intervalArray)


        }
    }
</script>

<style scoped>


    .safetyWarningBox {
        background-image: url("../../assets/img/dutyMonitoring/bgSafetyWarning.png");
        height: 480px;
        position: relative;
        padding: 50px 25px 20px 20px;
        margin-top: -20px;
    }

    .safetyWarningTableRow {
        background-image: url("../../assets/img/dutyMonitoring/bgDefaultRow.png");
        background-repeat: no-repeat;
        background-position: center;
        margin: 6px 0;
        width: 448px;
        line-height: 30px;
        padding: 0 26px;
        cursor: pointer;
    }

    .safetyWarningTableRow.active {
        background-image: url("../../assets/img/dutyMonitoring/bgSelecedRow.png");
    }

    ::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }

    .dataSafetyWarninListBox {
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

    @keyframes scanning {
        0% {
            top: 0%
        }
        20% {
            top: 0%;
            opacity: 0
        }
        21% {
            top: 0%;
            opacity: 1
        }
        49% {
            top: 80%;
            opacity: 1
        }
        50% {
            top: 80%;
            opacity: 0
        }
        100% {
            top: 80%
        }
    }
/*#45ddfe*/
    .scanningBar {
        width: 88%;
        left: 30px;
        height: 30px;
        /*background: rgb(0, 67, 255, .9);*/
        background-image: linear-gradient(rgba(69, 221, 254 , 0)  0% ,rgba(69, 221, 254, 0.3) 90% ,rgba(69, 221, 254, 1) 100% );
        position: absolute;
        top: 0;
        animation: scanning 5s infinite linear;
        /*box-shadow: 0 4px 10px 4px rgba(0, 67, 255, 0.7);*/
        opacity: 0
    }

</style>
